<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹砖块</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/welcome.css">
    <link rel="stylesheet" href="./css/difficultyChoose.css">
    <link rel="stylesheet" href="./css/container.css">
    <link rel="stylesheet" href="./css/choose-1.css">
    <link rel="stylesheet" href="./css/introduction.css">
    <link rel="stylesheet" href="./css/levelChoose.css">
</head>

<body>
    <article class="content">

    </article>
    <!-- zf  动态背景 -->
    <div class="square">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="circle">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


    <!-- 欢迎界面 -->
    <div class="welcome">
        <button class="start-btn"></button>
        <audio id="audio1" autoplay="autoplay" loop="loop" preload="auto" src="audio/Masque_Jupiter - 菊次郎的夏天（纯钢琴）.mp3">       
        </audio>
    </div>
    <!-- 选择界面1 -->
    <div class="choose-1">
        <div class="content1"><button class="return" id="fanhui1"></button></div>
        <div class="content2">
            <button class="difficulty"></button>
            <button class="introduction">

            </button>
        </div>
    </div>
    <!-- 游戏介绍 -->
    <div class="Introduction">
        <div class="content1"><button class="return" id="fanhui3"></button></div>
        <div class="small_img"><button class="close_btn0"></button></div>
        <div class="tip_bg">
            <div class="text-container">
                <p>1. 点击按钮开始游戏</p>
                <p>2. 游戏方法:</p>
                <p>(1) 使用键盘控制方向按键</p>
                <p>(2) 使用鼠标控制住滑块</p>
                <p>3. 小球触碰到底部为失败</p>
                <p>4. 清空所有方块游戏胜利</p>
            </div>
        </div>
    </div>
    <!-- 难度选择 -->
    <div class="difficultyChoose">
        <div class="content1"><button class="return" id="fanhui4"></button></div>
        <div class="content2">

            <!-- <h1>请选择难度</h1> -->
            <button class="difficultyLevel" id="easy"></button>
            <button class="difficultyLevel" id="middle"></button>
            <button class="difficultyLevel" id="hard"></button>
        </div>
    </div>
    <!-- 关卡选择界面 -->
    <div class="levelChoose">
        <div class="content1"><button class="return" id="fanhui5"></button></div>
        <div class="content2" id="levelPerent">

        </div>
    </div>
    <!-- 游戏界面 -->
    <div class="container">
        <div class="menu">
            <div class="menuChild"><button class="return" id="fanhui2"></button></div>
            <div class="menuChild">
                <h5><img src="./img/levelChoose/passed.png" alt="" style="margin-top: 4px;width: 25px;height: 25px;">：
                    <span id="dif-display"></span>
                </h5>
            </div>
            <div class="menuChild">

                <h5><img src="./img/running/Heart.png" alt="" style="margin-top: 7px;width: 25px;height: 20px;">:
                    <span id="life-display">0次</span>
                </h5>
            </div>
            <div class="menuChild">
                <h5><img src="./img/running/score.png" alt="" style="margin-top: 5px;width: 23px;height: 23px;">:
                    <span id="score-display">0块</span>
                </h5>
            </div>
            <div class="menuChild">
                <h5><img src="./img/running/time.png" alt="" style="margin-top: 5px; width: 23px;height: 23px;">:
                    <span id="time-display">0s</span>
                </h5>
            </div>
            <div class="menuChild">
                <button class="btn"></button>
                <!-- 开始游戏按钮 -->
                <button class="btn1"></button>
                <!-- 暂停游戏按钮 -->
                <button class="btn2"></button>
                <!-- 继续游戏按钮 -->
            </div>

        </div>
        <!-- <button style="width: 50px; height: 20px;" class="return" id="fanhui2">返回</button> -->

        <div class="game">
            <!--  游戏结束界面  结束时弹出 -->
            <div id="win-popup" class="hidden">
                <button class="close-btn"></button>
                <button class="return-levelchoose-btn"></button>
                <button class="restart-btn"></button>
                <button class="next-btn"></button>
                <div class="result-container">
                    <p>Score: <span id="win-score"></span></p>
                    <p>Time: <span id="win-time"></span></p>
                    <p>Grade: <span id="win-grade"></span></p>
                </div>
            </div>
            <div id="lose-popup" class="hidden">
                <button class="close-btn"></button>
                <button class="return-levelchoose-btn"></button>
                <button class="restart-btn"></button>
                <button class="next-btn"></button>
                <div class="result-container">
                    <p>Score: <span id="final-score"></span></p>
                    <p>Time: <span id="final-time"></span></p>
                    <p>Grade: <span id="final-grade"></span></p>
                </div>
            </div>

            <div id="zhuan"></div>
            <div class="ball"></div>
            <div class="ban"></div>
        </div>
    </div>

</body>
<script src="./js/index.js">
</script>


</html>